
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片放大效果</title>
</head>
<style type="text/css">
  *{margin:0;padding:0;}
  .small{box-shadow: 4px 4px 4px #ccc;position: relative;}
  .small,.big{float: left;}
  .small img{width: 400px;height: 400px;border:1px solid #ccc;}
  .small p{display: none;width: 100px;height: 100px;background-color: #aaa;opacity: 0.5;position: absolute;}
  .big{border:1px solid #ccc;width: 400px;height: 400px;overflow: hidden;display: none;position: relative;}
  .big img{width: 800px;height: 800px;position: absolute;}
</style>
<script language="javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
  
  $(function(){


    // alert("ok");
    var smallImg = $(".small");
    var bigImg = $(".big img");
    // smallImg.mouseover(function(event) {
    //   /* Act on the event */
    //   $("#hoverBox").show();
    //   $(".big").show();

     
    // });

    smallImg.mousemove(function(event) {
      /* Act on the event */
      $("#hoverBox").show();
      $(".big").show();

       var mouseX = event.pageX - $(this).offset().left - 50;
        var mouseY = event.pageY- $(this).offset().top - 50;

        mouseX = mouseX <0 ? 0 : mouseX;
        mouseX = mouseX >300 ? 300 : mouseX;

        mouseY = mouseY <0 ? 0 : mouseY;
        mouseY = mouseY >300 ? 300 : mouseY;
        // console.log(mouseX+","+mouseY);
        $("#hoverBox").css({top:mouseY,left:mouseX})
        var topImg = - mouseY * 2;
        var leftImg = -mouseX * 2;
        topImg = topImg < -400 ? -400 : topImg;
        leftImg = leftImg < -400 ? -400 : leftImg;
        bigImg.css({
          top: topImg,
          left: leftImg
        });

    });


    $(".small").mouseleave(function(event) {
      /* Act on the event */
      $("#hoverBox").hide();
      $(".big").hide();
    });
  })
</script>
<body>
  <div class="small">
    <img src="images/400.jpg" />
    <p id="hoverBox"></p>
  </div>
  <div class="big">
    <img src="images/800.jpg" />
  </div>
</body>
</html>
